<template>
  <div v-loading="loading" element-loading-text="拼命加载中">

    <div class="content_top" style="padding-bottom: 5px">
      <el-form :inline="true" size="mini" label-width="10px;">
        <el-form-item label="社区:">
          <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.communityId" clearable @change="onCommunityChange">
            <el-option v-for="item in communityItems" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小区:">
          <el-select v-model="condition.villageId" class="form-item" filterable remote reserve-keyword clearable
                     placeholder="请输入关键词" :remote-method="loadVillageItems" :loading="selectLoading">
            <el-option
                v-for="item in villageList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间:">
<!--          <el-date-picker v-model="condition.dateRange" style="margin-top: 5px" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">-->
<!--          </el-date-picker>-->


          <el-date-picker
              v-model="condition.dateRange" style="margin-top: 5px"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              type="datetimerange"
              placeholder="选择日期时间"
              :picker-options="pickerOptions" align="right">
          </el-date-picker>

        </el-form-item>

        <div class="form-item" style="display: flex; justify-content: center; width: 100%; margin-top: 8px; margin-bottom: 8px">
          <el-button icon="el-icon-search" type="primary" size="mini" @click="loadList">查 询&nbsp;&nbsp;</el-button>
          <el-button icon="el-icon-download" type="primary" size="mini" @click="onExport">导 出&nbsp;&nbsp;</el-button>
        </div>
      </el-form>
    </div>

    <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
      <el-table-column type="index" header-align="center" align="center" width="44px"/>

      <el-table-column prop="name" label="商品" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="count" label="销量" header-align="center" align="center"/>
    </el-table>

    <div class="content_bottom" style="text-align: center">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                     :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

  </div>

</template>

<script>
import {download} from "@/api/file/file"
import {salesList} from '@/api/order/order'
import {communityItems} from '@/api/base/community'
import {villageList} from '@/api/base/village'

export default {
  name: 'SalesStatistics',
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      loading: false,
      selectLoading: false,
      dialogVisible: false,
      villageList: [],
      communityItems: [],
      condition: {
        currentPage: 1,
        pageSize: 20,
        communityId: null,
        villageId: null,
        dateRange: [],
        start: null,
        end: null,
      },
      data: {}
    }
  },
  computed: {},
  mounted() {
    this.loadCommunityItems()
    this.loadList()
  },
  methods: {
    async loadVillageItems(query) {
      this.selectLoading = true

      let param = {
        pageSize: 100, currentPage: 1, name: query, communityId: this.condition.communityId
      }

      villageList(param).then((res) => {
        this.villageList = res.data
        this.selectLoading = false
      })
    },
    async loadCommunityItems() {
      let res = await communityItems({type: 1});
      this.communityItems = res.data
    },
    onCommunityChange() {
      this.villageList = []
      this.loadVillageItems(null);
    },
    handleSizeChange(val) {
      this.condition.pageSize = val
      this.loadList()
    },
    handleCurrentChange(val) {
      this.condition.currentPage = val
      this.loadList()
    },
    async loadList() {
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.condition))
      if (this.condition.dateRange && this.condition.dateRange.length > 0) {
        params.start = this.condition.dateRange[0]
        params.end = this.condition.dateRange[1]
        params.dateRange = null
      }
      let res = await salesList(params)
      this.loading = false
      if (res.code !== "0") return
      this.data = res
    },
    onExport() {
      let params = JSON.parse(JSON.stringify(this.condition))
      if (this.condition.dateRange && this.condition.dateRange.length > 0) {
        params.start = this.condition.dateRange[0]
        params.end = this.condition.dateRange[1]
        params.dateRange = null
      }
      if (!params.start) {
        return this.$message.warning("请选择开始日期")
      }
      if (!params.end) {
        return this.$message.warning("请选择截止日期")
      }

      this.loading = true
      download('order/export/sales', params, '销售统计-' + new Date() / 1000 + ".xls", () => {
        this.loading = false
      });
    },
  }
}
</script>

<style scoped>
>>> .el-dialog__body {
  padding: 10px 20px;
  color: #606266;
  font-size: 14px;
}

td {
  padding-right: 10px;
}

.form-item {
  width: 200px;
}

</style>
